<template>
  <div class="layout-container">
    <el-container>
      <el-header class="header">
        <div class="header-left">
          <el-button
            type="text"
            class="collapse-btn"
            @click="toggleCollapse"
          >
            <el-icon><Expand v-if="isCollapse" /><Fold v-else /></el-icon>
          </el-button>
          <div class="logo">
            <span class="logo-icon">✂️</span>
            <span class="logo-text">剪纸后台管理</span>
          </div>
        </div>
        <div class="header-right">
          <div class="user-info">
            <el-dropdown @command="handleUserCommand">
              <span class="el-dropdown-link">
                <el-avatar
                  :size="32"
                  :src="userInfo.avatarUrl ? getImageUrl(userInfo.avatarUrl) : ''"
                  icon="User"
                  class="user-avatar"
                />
                <span class="username">{{ userInfo.nickname || '管理员' }}</span>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">
                    <el-icon><User /></el-icon>
                    个人资料
                  </el-dropdown-item>
                  <el-dropdown-item command="settings">
                    <el-icon><Setting /></el-icon>
                    系统设置
                  </el-dropdown-item>
                  <el-dropdown-item divided command="logout">
                    <el-icon><SwitchButton /></el-icon>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      
      <el-container>
        <el-aside :width="isCollapse ? '64px' : '240px'" class="sidebar">
          <!-- 侧边栏菜单 -->
          <el-menu
            :default-active="activeMenu"
            class="sidebar-menu"
            router
            :collapse="isCollapse"
            :unique-opened="true"
            background-color="#8B0000"
            text-color="#ffffff"
            active-text-color="#FFD700"
          >
            <!-- 工作台 -->
            <el-menu-item index="/" class="menu-item-dashboard">
              <el-icon><House /></el-icon>
              <template #title>
                <span class="menu-title">工作台</span>
              </template>
            </el-menu-item>

            <!-- 内容管理 -->
            <el-sub-menu index="content" class="menu-group">
              <template #title>
                <el-icon><Document /></el-icon>
                <span class="menu-title">内容管理</span>
              </template>
              <el-menu-item index="/culture" class="sub-menu-item">
                <el-icon><Picture /></el-icon>
                <template #title>剪纸文化</template>
              </el-menu-item>
              <el-menu-item index="/news" class="sub-menu-item">
                <el-icon><Promotion /></el-icon>
                <template #title>活动资讯</template>
              </el-menu-item>
            </el-sub-menu>

            <!-- 轮播图管理 -->
            <el-menu-item index="/banners" class="menu-item">
              <el-icon><PictureRounded /></el-icon>
              <template #title>
                <span class="menu-title">轮播图管理</span>
              </template>
            </el-menu-item>

            <!-- 教程管理 -->
            <el-menu-item index="/tutorials" class="menu-item">
              <el-icon><VideoPlay /></el-icon>
              <template #title>教程管理</template>
            </el-menu-item>

            <!-- 用户管理 -->
            <el-sub-menu index="user" class="menu-group">
              <template #title>
                <el-icon><User /></el-icon>
                <span class="menu-title">用户管理</span>
              </template>
              <el-menu-item index="/users" class="sub-menu-item">
                <el-icon><UserFilled /></el-icon>
                <template #title>用户列表</template>
              </el-menu-item>
              <el-menu-item index="/profile" class="sub-menu-item">
                <el-icon><User /></el-icon>
                <template #title>个人资料</template>
              </el-menu-item>
            </el-sub-menu>

            <!-- 系统管理 -->
            <el-sub-menu index="system" class="menu-group">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span class="menu-title">系统管理</span>
              </template>
              <el-menu-item index="/review" class="sub-menu-item">
                <el-icon><View /></el-icon>
                <template #title>内容审核</template>
              </el-menu-item>
              <el-menu-item index="/settings" class="sub-menu-item">
                <el-icon><Tools /></el-icon>
                <template #title>系统设置</template>
              </el-menu-item>
              <el-menu-item index="/logs" class="sub-menu-item">
                <el-icon><Document /></el-icon>
                <template #title>系统日志</template>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        
        <el-container>
          <el-main class="main-content">
            <router-view />
          </el-main>
          
          <el-footer class="footer">
            <div class="footer-content">
              <p>© 2025 中国剪纸文化展示平台 - 传承中华文化，弘扬民族艺术</p>
            </div>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getImageUrl } from '@/utils/imageUtils'
import {
  House,
  Document,
  User,
  Promotion,
  DataAnalysis,
  Setting,
  ArrowDown,
  SwitchButton,
  Picture,
  PictureRounded,
  VideoPlay,
  UserFilled,
  View,
  Tools,
  Expand,
  Fold,
  Reading,
  EditPen,
  VideoCamera
} from '@element-plus/icons-vue'

export default {
  name: 'MainLayout',
  components: {
    House,
    Document,
    User,
    Promotion,
    DataAnalysis,
    Setting,
    ArrowDown,
    SwitchButton,
    Picture,
    PictureRounded,
    VideoPlay,
    UserFilled,
    View,
    Tools,
    Expand,
    Fold,
    Reading,
    EditPen,
    VideoCamera
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const activeMenu = ref(route.path)
    const isCollapse = ref(false)
    const userInfo = ref({})
    
    // 监听路由变化，更新激活菜单
    watch(route, () => {
      activeMenu.value = route.path
    })
    
    // 获取用户信息
    const getUserInfo = () => {
      const userInfoStr = localStorage.getItem('userInfo')
      if (userInfoStr) {
        userInfo.value = JSON.parse(userInfoStr)
      }
    }

    
    // 处理用户下拉菜单命令
    const handleUserCommand = (command) => {
      switch (command) {
        case 'profile':
          router.push('/profile')
          break
        case 'settings':
          router.push('/settings')
          break
        case 'logout':
          ElMessageBox.confirm('确定要退出登录吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 清除本地存储的token和用户信息
            localStorage.removeItem('token')
            localStorage.removeItem('userInfo')
            // 跳转到登录页
            router.push('/login')
            ElMessage.success('已退出登录')
          }).catch(() => {
            // 用户取消退出
          })
          break
      }
    }
    
    // 切换侧边栏折叠状态
    const toggleCollapse = () => {
      isCollapse.value = !isCollapse.value
    }

    // 监听用户信息更新事件
    const handleUserInfoUpdate = () => {
      getUserInfo()
    }

    // 组件挂载时获取用户信息
    onMounted(() => {
      getUserInfo()
      // 监听自定义事件
      window.addEventListener('userInfoUpdated', handleUserInfoUpdate)
    })

    // 组件卸载时移除事件监听
    onBeforeUnmount(() => {
      window.removeEventListener('userInfoUpdated', handleUserInfoUpdate)
    })

    return {
      activeMenu,
      isCollapse,
      userInfo,
      handleUserCommand,
      toggleCollapse,
      getImageUrl
    }
  }
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.header {
  background: linear-gradient(135deg, #8B0000 0%, #DC143C 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
  position: relative;
  overflow: hidden;
}

.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 20%);
  pointer-events: none;
}

.header-left {
  display: flex;
  align-items: center;
}

.collapse-btn {
  color: white !important;
  margin-right: 16px;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.collapse-btn:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.collapse-btn .el-icon {
  font-size: 18px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-icon {
  font-size: 24px;
  margin-right: 10px;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  margin-right: 10px;
  background-color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.username {
  margin-right: 5px;
  font-weight: 500;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: white;
}

.sidebar {
  background-color: #8B0000;
  box-shadow: 2px 0 8px rgba(139, 0, 0, 0.15);
  z-index: 99;
  position: relative;
  transition: all 0.3s ease;
}

.sidebar-menu {
  border-right: none;
  height: calc(100vh - 60px);
  overflow-y: auto;
  background-color: #8B0000;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 240px;
}

/* 菜单样式重写 */
.sidebar-menu .el-menu-item,
.sidebar-menu .el-sub-menu__title {
  height: 48px;
  line-height: 48px;
  color: #ffffff !important;
  border-radius: 0;
  margin: 0;
  padding: 0 20px !important;
  transition: all 0.3s ease;
}

.sidebar-menu .el-menu-item:hover,
.sidebar-menu .el-sub-menu__title:hover {
  background-color: #A52A2A !important;
  color: #FFD700 !important;
}

.sidebar-menu .el-menu-item.is-active {
  background-color: #DC143C !important;
  color: #ffffff !important;
  position: relative;
}

.sidebar-menu .el-menu-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #FFD700;
}

.sidebar-menu .el-sub-menu .el-menu-item {
  height: 40px;
  line-height: 40px;
  padding-left: 48px !important;
  background-color: transparent;
  color: #F0F0F0 !important;
}

.sidebar-menu .el-sub-menu .el-menu-item:hover {
  background-color: #A52A2A !important;
  color: #FFD700 !important;
}

.sidebar-menu .el-sub-menu .el-menu-item.is-active {
  background-color: #B22222 !important;
  color: #FFD700 !important;
}

.sidebar-menu .el-sub-menu__title .el-icon {
  margin-right: 12px;
  font-size: 16px;
}

.sidebar-menu .el-menu-item .el-icon {
  margin-right: 12px;
  font-size: 16px;
}

.sidebar-menu .menu-title {
  font-size: 14px;
  font-weight: 500;
}

.sidebar-menu .el-sub-menu .el-menu {
  background-color: #6B0000;
}

/* 折叠状态样式 */
.sidebar-menu.el-menu--collapse .el-menu-item,
.sidebar-menu.el-menu--collapse .el-sub-menu__title {
  padding: 0 20px !important;
  text-align: center;
}

.sidebar-menu.el-menu--collapse .el-menu-item .el-icon,
.sidebar-menu.el-menu--collapse .el-sub-menu__title .el-icon {
  margin-right: 0;
}

/* 特殊菜单项样式 */
.menu-item-dashboard {
  border-bottom: 1px solid #1f2937;
  margin-bottom: 8px;
}

.menu-group {
  margin-bottom: 4px;
}

.sub-menu-item {
  font-size: 13px;
}

.main-content {
  background-color: #f0f2f5;
  padding: 24px;
  overflow-y: auto;
  position: relative;
  min-height: calc(100vh - 120px);
}

.footer {
  background-color: #ffffff;
  border-top: 1px solid #e8e8e8;
  padding: 0;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.05);
}

.footer-content {
  text-align: center;
  padding: 16px;
  color: #8c8c8c;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 60px;
    height: calc(100vh - 60px);
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  .logo-text {
    font-size: 14px;
  }

  .username {
    display: none;
  }

  .header {
    padding: 0 16px;
  }

  .main-content {
    padding: 16px;
    margin-left: 0;
  }

  .collapse-btn {
    margin-right: 12px;
  }
}
</style>